<template>
    <div>
        <el-form ref="ruleFormRef" style="width: 100%;" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="项目名称" prop="ProjectName">
                <el-input v-model="ruleForm.ProjectName" />
            </el-form-item>
            <el-form-item label="订单名称" prop="OrdersId">
                <el-select v-model="ruleForm.OrdersId" placeholder="请选择你的订单" style="width: 100%;">
                    <el-option v-for="item in Order" :key="item.Id" :label="item.OrdersName" :value="item.Id" />
                </el-select>
            </el-form-item>
            <el-form-item label="项目备注" prop="ProjectDesc">
                <el-input v-model="ruleForm.ProjectDesc" />
            </el-form-item>
            <el-form-item label="项目金额" prop="Budget">
                <el-input v-model="ruleForm.Budget" />
            </el-form-item>
           <el-form-item label="项目经理" prop="MangerId">
                <el-select v-model="ruleForm.MangerId" placeholder="请选择你的经理" style="width: 100%;">
                    <el-option v-for="item in User" :key="item.Id" :label="item.UserName" :value="item.Id" />
                </el-select>
            </el-form-item>
            <el-form-item label="客户名称" prop="ClientId">
                <el-select v-model="ruleForm.ClientId" placeholder="请选择你的客户" style="width: 100%;">
                    <el-option v-for="item in Client" :key="item.Id" :label="item.ClientName" :value="item.Id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-date-picker v-model="TimePick" type="daterange" range-separator="To" start-placeholder="开始时间"
                    end-placeholder="结束时间" @change="change" />
            </el-form-item>
            <el-form-item>
                <div class="login-button">
                    <el-button type="primary" @click.prevent="submit(ruleFormRef)">
                        保存
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </div>
            </el-form-item>
        </el-form>

    </div>
</template>

<script setup lang="ts">
import clientapi from "@/api/clientapi";
 import ordersapi from "@/api/ordersapi";
import projapi from "@/api/projectapi"
import userapi from "@/api/userapi";

import { ComponentSize, ElNotification, FormInstance, FormRules } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';


const TimePick = ref()
const Order = ref()
const User = ref()
const Client = ref()
const emit = defineEmits(["Close"])
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref({
    id: 0,
    ProjectName: '',
    OrdersId: '',
    ProjectDesc: '',
    Budget: '',
    MangerId: '',
    ClientId: '',
    BeginTime: '',
    EndTime: '',
    Status: 0,
})

const rules = reactive<FormRules<RuleForm>>({
    ProjectName: [
        { required: true, message: '请输入项目名称', trigger: 'blur' },
        { min: 2, max: 5, message: '2-5个字符', trigger: 'blur' },
    ],

})

const getselect = () => {
    userapi.getall().then(res => {
        console.log("data=", res.data)
        User.value = res.data
    })
    clientapi.getall().then(res => {
        console.log("data=", res.data)
        Client.value = res.data
    })
    ordersapi.getall().then(res => {
        console.log("data=", res.data)
        Order.value = res.data
    })
}

const change = (datas: any) => {
    ruleForm.value.BeginTime = datas[0]
    ruleForm.value.EndTime = datas[1]

}

onMounted(() => {
    getselect()


})

interface RuleForm {
    ProjectName: string
    OrderId: number
    MangerId: number
    ClientId: number
    Status: number
}

const submit = (formel: FormInstance | undefined) => {
    if (!formel) return;
    formel.validate(val => {
        if (val) {
            projapi.Add(ruleForm.value).then(res => {
                if (res.code > 0) {
                    ElNotification.success({
                        title: '提示',
                        message: '添加成功',
                        type: 'success',
                        showClose: false,

                    })
                    emit("Close", "add")
                }
                else {
                    ElNotification.success({
                        title: '提示',
                        message: '失败',
                        type: 'error',
                        showClose: false,

                    })
                }
            })

        }

    })
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style scoped>
.login-button {
    width: 100%;
    display: flex;
    justify-content: center;
}
</style>